<!-- 商品分类 -->
<template>
  <div>
    <head-top shopText="商品分类" shopBtnText="刷新"></head-top>
    <section id="main">
      <nav-top txt="二级分类" :link="'/home/Shop/ShopClass'"></nav-top>
      <el-table :data="GetShopClassSecondList" border style="width: 100%">
        <el-table-column prop="categoryId" label="序号" width="70"> </el-table-column>
        <el-table-column prop="categoryName" label="分类" width="150"> </el-table-column>
        <el-table-column prop="icon" label="分类图标" width="200">
          <template v-slot="scoped">
            <el-image
              style="width: 100px; height: 100px"
              :src="scoped.row.icon"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="grade" label="级别"> </el-table-column>
        <el-table-column prop="secondcount" label="商品数量"> </el-table-column>
        <el-table-column prop="status" label="是否上架">
          <template v-slot="scoped">
            <el-switch
              :value="scoped.row.status == 0"
              @change="isStart(scoped.row.categoryId)"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="seq" label="排序"></el-table-column>
        <el-table-column prop="" label="操作" width="100px">
          <template v-slot="scoped">
            <el-button type="text"  size="small">
              <router-link
                :to="{
                  path: '/home/Shop/EditShopClass',
                  query: { categoryId: scoped.row.categoryId },
                }"
                >编辑</router-link
              ></el-button
            >
            <el-button type="text"  size="small">
              <router-link to=""
                ><span @click="delBtn(scoped.row.categoryId)"
                  >删除</span
                ></router-link
              ></el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          background
          align="center"
          @current-change="handleCurrentChange"
          layout="total,prev, pager, next, jumper"
          :page-size="pageSize"
          :total="total"
        >
        </el-pagination>
      </div>
    </section>
    <router-view></router-view>
  </div>
</template>
  <script>
import HeadTop from "@/components/Shop/HeadTop.vue";
import NavTop from "@/components/Shop/NavTop.vue";
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
export default {
  components: {
    HeadTop,
    NavTop,
  },
  data() {
    return {
      GetShopClassSecondList: [],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      isGrounding: true,
      isRecommend: true,
    };
  },
  created() {
    this.categoryId = this.$route.query.categoryId;
    console.log("categoryId   ", this.categoryId);
  },
  mounted() {
    this.getSecondList();
  },
  methods: {
    //判断开关状态
    isStart(categoryId) {
      console.log(categoryId);
      let obj = this.GetShopClassSecondList.find((item) => {
        return item.categoryId == categoryId;
      });
      console.log("obj", obj.status);
      obj.status = obj.status == 1 ? 0 : 1;
      console.log(obj.status);
      this.UpdateShopClass(obj).then((res) => {
        console.log(res);
      });
      console.log(this.getSecondList);
    },

    ...mapActions("shop", [
      "getShopClassListSecond",
      "UpdateShopClass",
      "DelShopClassById",
    ]),

    // 根据分类id删除分类
    delBtn(delId) {
      let id = delId;
      this.DelShopClassById(id).then((res) => {
        console.log("删除请求中的id", id);
        console.log("删除请求", res);
        this.getSecondList();
        this.open();
      });
    },
    open() {
      this.$message("删除成功");
    },
    // 判断当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getSecondList();
    },
    // 获取当前页面数据并分页
    getSecondList() {
      let id = this.categoryId;
      let currentPage = this.currentPage;
      let pageSize = this.pageSize;
      this.getShopClassListSecond({ id, currentPage, pageSize })
        .then((res) => {
          // console.log(this.GetShopClassSecondList);
          this.GetShopClassSecondList = res.data;
          this.total = res.count;
          console.log("getsecondlist", res);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  computed: {},
};
</script>
  <style scoped>
a {
  text-decoration: none;
  color: #409eff;
}
#main {
  width: 96%;
  margin: auto;
}
.head {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #f0f0f0;
  border: 1px solid #e4e4e4;
  margin-top: 25px;
}
.head span {
  margin-left: 20px;
}
::v-deep .has-gutter tr th {
  background-color: #f5f5ff;
  text-align: center;
}
::v-deep .el-table_1_column_9 .cell,
::v-deep .el-table_1_column_10 .cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
::v-deep .el-table_1_column_9 .cell a,
.el-table_1_column_10 .cell a {
  color: skyblue;
  text-decoration: none;
  font-size: 12px;
}
::v-deep .el-table__row td {
  text-align: center;
}
</style>